<template>
  <div class="search" v-if="is_show_search" :class="is_top?'box_top':''">
    <div :class="is_show_list?'search_background':''">
      <div class="search_box">
        <van-search
          v-model="searchValue"
          show-action
          placeholder="搜索标题、编号、正文内容"
          @search="onSearch()"
          @cancel="onCancel"
          @clear="onClear"
          style="padding: 4px 0.2rem;"
          shape="round"
        />
      </div>
      
      <!-- 搜索历史 -->
      <div v-show="!is_show_list">
        <searchHistory ref="searchHistory" :searchValue='searchValue'></searchHistory>
      </div>

      <div class="search_condition" v-if="is_result">
        搜索结果：共{{total}}条
      </div>

      <!-- 列表 -->
      <div class="ticketList" :class="is_result?'ticketList_top':''" v-show="is_show_list" >
        <van-list
          v-model="isLoading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onSearch('val')"
        >
        <div v-for="(item,index) in searchTicket_list" :key="index" @click="skipTo(item)">
          <TicketList :item = 'item'></TicketList>
        </div>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import TicketList from '@/components/TicketList'
import searchHistory from '@/components/searchHistory'
export default {
  props:{
    ticket_list:{
      type:Array,
      required:true,
    },
    category:{
      type:String,
      required:true,
    },
    type_obj:{
      type:Object,
      required:true,
    },
    act_state_obj:{
      type:Object,
      required:true,
    },
    is_top:{
      type:Boolean,
      required:true,
    },
    cc:{
      type:String,
      default:''
    }
  },
  data(){
    return{
      is_show_search: false,
      isLoading:false,
      finished:true,
      is_show_list:false,//点击搜索导航栏时  隐藏当前列表
      is_result:false,//是否显示搜索结果条数
      searchValue:"",
      searchTicket_list:[],
      page:1,
      per_page:10,
      total:-1,
    }
  },
  components:{
    searchHistory,
    TicketList,
  },
  watch:{
    searchValue(){
      this.$refs.searchHistory.loopList(this.searchValue)
    }
  },
  methods:{
    onSearch(val = ''){
      this.is_show_list = true
      this.isLoading = true
      if(!val){
        this.searchTicket_list = []
        this.finished = false
        this.page = 1
      }
      let  data = {
        category:this.category,
      }
      if(this.cc){
        data.cc = this.cc
      }
      data.page = this.page
      data.per_page = this.per_page
      //标题
      data.title = this.searchValue 
      // 筛选条件
      if(Object.keys(this.type_obj).length != 0){
        data.workflow_ids = this.type_obj.id
      }
      if(Object.keys(this.act_state_obj).length != 0){
        data.act_state_id = this.act_state_obj.id
      }
      //获取工单列表数据
      this.$store.dispatch('api_get_ticket_list',data).then(res=>{
        this.isLoading = false
        this.searchTicket_list.push(...res.data.data.value)
        this.total = res.data.data.total
        this.page = this.page + 1
        this.is_result = true

        if(this.searchTicket_list.length >= this.total){
          this.finished = true
        }
      })
      //添加历史记录
      this.$store.commit('addHistory',this.searchValue)
    },
    onClear(){
      // 显示当前筛选条件下的数据列表
      this.is_show_list = true
    },
    onCancel(){
      this.is_result = false
      this.is_show_list = false
      this.hide()
    },
    childMethod(val){
      this.searchValue = val
      this.onSearch()
    },
    // 显示
    show(){
      this.searchTicket_list = this.ticket_list
      this.is_show_search = true
      window.history.pushState(null,null,'#')
    },
    // 关闭
    hide(){
      this.is_show_search = false
      this.$router.go(-1)
    },
    skipTo(item){
      this.hide()  //使用缓存组件的话 从详情页返回上一页时会返回到http://192.168.1.13:6061/#，所以跳转时，让当前页面关闭，缺点：会出现闪屏的情况
      this.$parent.skipDetails(item)
    },
  },
  mounted(){
    // dom渲染成功后 监听popstate 事件
    window.addEventListener('popstate',e => {
      if(this.is_show_search){
        this.is_show_search = !this.is_show_search
      }
      this.is_result = false
      this.is_show_list = false
      this.searchValue = ''
    },false)
  },
  beforeDestroy(){
    // 页面销毁前 移除popstate 事件
    window.removeEventListener('popstate',e => {
      if(this.is_show_search){
        this.is_show_search = !this.is_show_search
      }
    },false)
  },
}
</script>

<style lang="less" scoped>
.box_top{
  top:0px !important;
}
.search_background{
  background: #F8F8F8;
  height: 100%;
}
.search{
  background: #fff;
  position: absolute;
  z-index: 9999;
  top:-45px;
  bottom:0px;
  width: 100%;
  .search_box{
    border-bottom: 1px solid #F0F0F0;
  }
  .van-search {
    background: #F8F8F8;
    .van-search__content{
      background: #fff;
    }
    .van-search__action{
      color:#3396FB;
      line-height: 24px;
    }
  }
  .search_condition{
    line-height: 25px;
    height: 25px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 13px;
    color:#B5B5B5;
    .van-icon{
      float: right;
      font-size: 0.48rem;
      line-height: 25px;
    }
  }
  
  .ticketList{
    position: absolute;
    top:42px;
    bottom: 0;
    width: 100%;
    overflow: scroll;
  }
  .ticketList_top{
    top:67px !important;
  }
  .ticketList::-webkit-scrollbar{
    display: none;
  }
}
</style>